<template>
	<view class="home">
		<u-navbar title="保养" placeholder autoBack left-icon-color="#000">
			<template #right>
				<u-text text="保养记录" @click="handleRoute('/pages/index/mainRecord')" color="#0c9bf4" size="32rpx"></u-text>
			</template>
		</u-navbar>
		<block v-if="data.current == 1">
			<view class="maintenance-item u-flex-y-center " v-for="(item,index) in data.list" :key="index"
				@click="_baoyangType(item)">
				<u-image :src="item.image" width="120rpx" height="120rpx"></u-image>
				<view class="u-flex-between u-flex-y-center u-flex-1">
					<view>
						<u-text :text="item.text" color="#333" size="36rpx"></u-text>
					</view>
					<u-icon name="arrow-right" color="#9e9e9e" size="14"></u-icon>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="maintenance-item u-flex-y-center " v-for="(item,index) in data.typeList" :key="index"
				@click="handleRoute(`/pages/index/newMain?id=${item.id}&type=${item.type}`)">
				<u-image :src="prefixURL(item.image)" width="120rpx" height="120rpx"></u-image>
				<view class="u-flex-between u-flex-y-center u-flex-1 u-m-l-20">
					<view style="position: relative;">
						<u-text :text="item.name" color="#333" size="36rpx"></u-text>
						<view class="circle" v-if="item.is_red == 1"></view>
						<block v-if="item.type == 2">
							<u-text :text="`本次保养时间：${timeFormat(item.baoyang_time,'yyyy-mm-dd hh:MM') || ''}`"
								v-if="item.baoyang_time" margin="10rpx 0 0" color="#999" size="24rpx"></u-text>
							<u-text :text="`下次保养时间：${timeFormat(item.next_time,'yyyy-mm-dd hh:MM') || ''}`" v-if="item.next_time"
								margin="10rpx 0 0" color="#999" size="24rpx"></u-text>
						</block>
						<block v-if="item.type == 1">
							<u-text :text="`本次保养公里数：${item.baoyang_kilometer||''}`" v-if="item.baoyang_kilometer" margin="10rpx 0 0"
								color="#999" size="24rpx"></u-text>
							<u-text :text="`下次保养公里数：${item.next_kilometer||''}`" v-if="item.next_kilometer" margin="10rpx 0 0"
								color="#999" size="24rpx"></u-text>
						</block>
					</view>
					<u-icon name="arrow-right" color="#9e9e9e" size="14"></u-icon>
				</view>
			</view>
		</block>
	</view>
</template>
<script setup>
	import { onMounted, ref } from "vue";
	import { baoyangType } from "../../config/api";
	import { timeFormat } from 'uview-plus';
	import { prefixURL } from "../../util/util";
	const data = ref({
		list: [{
			image: '/static/images/icon_time.png',
			text: '保养时间',
			id: 2
		}, {
			image: '/static/images/icon_km.png',
			text: '公里数',
			id: 1
		}],
		typeList: [],
		current: 1,
		type: 1
	});
	onMounted(() => {
		uni.$on('changeCar', item => {
			baoyangType({ type: data.value.type, car_id: item.id }).then(res => {
				console.log(res)
				data.value.typeList = res.data
				data.value.current++
			})
		})
	})
	const handleRoute = (path) => {
		uni.$u.route(path)
		data.value.current = 1
	}
	const _baoyangType = (item) => {
		data.value.type = item.id
		uni.navigateTo({
			url: '/pages/index/changeCar'
		})
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		padding: 20rpx;
		background: #fafafa;
	}

	.maintenance-item {
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
		position: relative;

		.circle {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			background: #FF5353;
			position: absolute;
			top: 13rpx;
			right: -40rpx;
		}
	}
</style>